<template>
  <div class="received">
    <el-form class="received_nav">
      <div style="height:110px">
        <span style="margin-left:60px">起始时间：</span>
        <el-date-picker
          v-model="time1"
          type="date"
          placeholder="选择起始时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyyMMdd"
        />
        <span style="margin-left:60px">结束时间：</span>
        <el-date-picker
          v-model="time2"
          type="date"
          placeholder="选择结束时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyyMMdd"
        />
        <el-button type="primary" round style="margin-left:100px" @click="reset">查询</el-button>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="数据ID" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.total_data_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据日" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.data_day }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="配送人名字" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.delivery_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="配送人电话" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.delivery_phone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实际支付金额" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.total_pay_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="供货城市" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.code_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="渠道商" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.supplier_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="button1" size="medium" type="success" @click="goList(scope.row)">商品列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import { getToken, getAccount, getButtonpermsStr } from '@/utils/auth'
export default {
  data() {
    return {
      list: [],
      time1: '',
      time2: '',
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, // 页数
      total: 0,
      temp: {},
      buttonpermsStr: getButtonpermsStr(),
      button1: false
    }
  },
  mounted() {
    if (this.buttonpermsStr !== undefined) {
      if (this.buttonpermsStr.indexOf(125) > -1) {
        this.button1 = true
      }
    }
    this.temp = {
      current_page: this.currentPage,
      end_day: '',
      page_size: this.pagesize,
      start_day: '',
      state: 4
    }
    this.getList()
  },
  methods: {
    goList(row) {
      this.$router.push({
        path: '/order/goodList',
        query: {
          data: row.data_day
        }
      })
    },
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },

    // 查询
    reset() {
      this.getList()
    },
    // 获取列表
    getList() {
      if (this.time2) {
        if (this.time1 > this.time2) {
          var time3 = this.time2
          this.time2 = this.time1
          this.time1 = time3
        }
      }
      if (this.time1 === '') {
        this.temp.start_day = '100000000'
      } else if (this.time1 == null) {
        this.temp.start_day = '100000000'
      } else {
        this.temp.start_day = this.time1
      }
      if (this.time2 === '') {
        this.temp.end_day = '100000000'
      } else if (this.time2 == null) {
        this.temp.end_day = '100000000'
      } else {
        this.temp.end_day = this.time2
      }
      return request({
        url: '/v3/admin/operator/total/data/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        res.list.map((value, index) => {
          value.total_pay_amount = value.total_pay_amount / 100
        })
        this.list = res.list
        this.total = res.total_record
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.received {
  margin-top: 60px;
  overflow: hidden;
  .received_nav {
    height: 80px;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 20px;
  }
}
</style>
